<template>
    <div>
        <div class='ListTwo-box'>
            <div class='company-culture'></div>
            <div class='company-culture-content'>
                <ul class='company-culture-content-box'>
                    <li class='company-culture-content-item' v-for='(item,index) of companyCulture' :key='index+"company-culture"'>
                        <img :src="item" alt="" width=100% height=100%>
                    </li>
                </ul>
            </div>
            <div class='environment'></div>
        </div>
    </div>
</template>
<script>
import { setInterval } from 'timers';
export default {
  name: 'ListTwo',
  data(){
      return{
          "companyCulture": ["/static/swiperImg/3-1.jpg","/static/swiperImg/3-2.jpg","/static/swiperImg/3-3.jpg","/static/swiperImg/3-4.jpg","/static/swiperImg/3-5.jpg","/static/swiperImg/3-6.jpg"]
      }
  },
  mounted(){
      const $companyCulture = $('.company-culture-content-item');
      let i = 0;
      $companyCulture.eq(0).addClass('show');
      setInterval(function(){
          i++;
          if(i>5){i=0};
          $companyCulture.eq(i).addClass('show').siblings().removeClass('show');
      },3000)
  }
  
  
}
</script>
<style lang="stylus" scoped>
    .ListTwo-box
        margin: 0 auto;
        width: 1108px;
        .company-culture
            width: 100%;
            height: 314px;
            background: url("/static/swiperImg/2.jpg") no-repeat -164px -60px/cover;
        .company-culture-content
            width: 1108px;
            height: 406px;
            overflow: hidden;
            .company-culture-content-box
                position: relative;
                width: 100%;
                height: 100%;
                .company-culture-content-item
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 1108px;
                    height: 100%;
                    overflow: hidden;
                    opacity: 0;
                    transition: 2s;
                .show
                    opacity: 1;
        .environment
            width: 1108px;
            height: 2688px;
            background: url('/static/swiperImg/4.jpg') no-repeat -155px -1px/1416px auto;

</style>